<template>
  <div class="app-container">
    <div class="customContainer oneSearchNoFooter">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker style="width:150px" :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy-MM-dd" type="date"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">门店：</span>
          <el-select filterable v-model="formInline.store_id" style="width:300px">
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门店" prop="store_name"></el-table-column>
        <el-table-column align="center" label="出样率" prop="rate"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getList } from '@/api/report/storeSampleRate';
import { getStore } from '@/api/common/commonApi';
import { DjStoreSelect } from '@/components/store';
export default {
  data() {
    return {
      list: null,
      listLoading: false,
      all_store_id: '',
      store_list: [],
      formInline: {
        datetime: '',
        store_id: ''
      },
      pickerDate: new Date(Date.now() - 8.64e7).toISOString().split('T')[0],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        }
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.list) {
        vm.getStoreList();
      }
    });
  },
  methods: {
    getStoreList() {
      getStore({ category_id: 670 }).then(res => {
        if (res.length > 1) {
          res.unshift({ id: 0, name: '全部' });
        }
        this.store_list = res;
        let data = res.filter(val => val.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else if (this.store_list.length > 0) {
          this.formInline.store_id = this.store_list[0].id;
        }
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
      this.fetchData();
    },
    getData(data) {
      data.forEach(val => {
        val.rate = (val.rate / 1).toFixed(2) + '%';
      });
      this.list = data;
      this.listLoading = false;
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.list = [];
      getList(this.formInline)
        .then(res => {
          if (res.code == 1) {
            this.getData(res.data);
          }
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>